<template>
  <div class="bgff p20">
    <el-form :inline="true" :model="form" v-if="level==1||level==2">
      <el-form-item label="地区">
        <city :addr_this="addr_this" :citys="citys" ref="city"></city>
      </el-form-item>
      <el-form-item>
        <el-button size="medium" type="primary" @click="search">搜索</el-button>
        <el-button size="medium" type="primary" @click="reset">重置刷新</el-button>
        <el-button size="medium" type="primary" @click="addNet">批量导入网关</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="loading"
      row-key="id"
      border
      style="width: 100%"
      empty-text="暂无数据"
    >
      <el-table-column
        type="index"
        width="50"
        :index="(index)=>{return (index+1) + (curPage - 1) * size }"
        label="序号"
      ></el-table-column>
      <el-table-column prop="name" label="网关名字" min-width="150"></el-table-column>
      <el-table-column prop="address" label="所属区域" min-width="150">
        <template slot-scope="scope">
          {{scope.row.province.name}}
          {{scope.row.city.name}}
          {{scope.row.district.name}}
        </template>
      </el-table-column>
      <el-table-column prop="equipments.length" label="设备数" min-width="120"></el-table-column>
      <el-table-column prop="online" label="正常" min-width="120"></el-table-column>
      <el-table-column prop="alarm" label="报警" min-width="120"></el-table-column>
      <el-table-column prop="offline" label="离线" min-width="150"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <detail ref="obj" :gat_id="scope.row.id"></detail>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      @current-change="handlePage"
      @size-change="handleSizeChange"
      :current-page.sync="curPage"
      :page-size="size"
      :page-sizes="[5,10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <addNet ref="form" :cur_this="cur_this"></addNet>
  </div>
</template>

<script>
import city from "@/components/citys/index.vue";
import detail from "./modul/detail";
import addNet from "./modul/addnet";
import { _gatewaysGet, _gatewaysShowNew } from "@/http/ajax";
export default {
  components: { detail, addNet, city },
  data() {
    return {
      addr_this: this,
      citys: {
        provinceId: 0,
        cityId: 0,
        districtId: 0
      },
      form: {
        name: ""
      },
      cur_this: this,
      loading: false,
      tableData: [],
      curPage: 1,
      size: 10,
      total: 0,
      level:sessionStorage.level
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search() {
      this.getList();
    },
    reset() {
      this.citys = {
        provinceId: 0,
        cityId: 0,
        districtId: 0
      };
      this.tableData = []
      this.curPage = 1;
      this.size = 10;
      this.total =0
      const _this = this.$refs.city;
      _this.dataInit();
      this.getList();
    },
    addNet() {
      const _this = this.$refs.form;
      _this.dialog = true;
      _this.doInit();
    },
    // 获取网关列表
    getList() {
      let user = JSON.parse(sessionStorage.user);
      let data = {
        page: this.curPage - 1,
        size: this.size,
        sort: "id,desc",
        deptId: user.deptId || user.dept.id || "",
        level:sessionStorage.level
      };
      this.tableData = [];
      this.loading = true;
      Object.keys(this.citys).forEach(key => {
        data[key] = this.citys[key];
      });
      _gatewaysGet(
        data,
        res => {
          this.total = res.totalElements;
          // this.tableData = res.content;
          let btnall = {};
          res.content.forEach(el => {
            btnall["id_" + el.id] = false;
            _gatewaysShowNew({ gatewayId: el.id }, ress => {
              el["online"] = ress.total
                ? ((
                    (ress.total - ress.alarm - ress.offline) /
                    ress.total
                  )*100).toFixed(1) +
                  "%"
                : 0;
              el["alarm"] = ress.total
                ? ((ress.alarm / ress.total) * 100).toFixed(1) + "%"
                : 0;
              el["offline"] = ress.total
                ? ((ress.offline / ress.total) * 100).toFixed(1) + "%"
                : 0;
              btnall["id_" + el.id] = true;
            });
          });
          this.loopCheck(btnall, res);
        },
        err => {}
      );
    },
    /**
     * 递归检测
     */
    loopCheck(boo, res) {
      let rebtn = false;
      Object.keys(boo).forEach(key => {
        if (!boo[key]) {
          rebtn = true;
        }
      });
      if (rebtn) {
        setTimeout(() => {
          this.loopCheck(boo, res);
        }, 300);
      } else {
        this.tableData = res.content;
        setTimeout(() => {
          this.loading = false;
        }, 600);
      }
    },
    // 切换页码
    handlePage(val) {
      this.curPage = val;
      this.getList();
    },
    // 切换条数
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
